<template>
    <n-modal v-model:show="preSuccessModal">
        <n-card 
            style="width: 644px;" 
            :bordered="false"
            role="dialog"
            aria-modal="true"
            class="success-card"
        >
            <div class="flex justify-center flex-col items-center" v-if="info">
                <n-flex>
                    <div class="icon-success flex-center">
                        <n-icon :size="20" color="#fff" :component="CheckmarkSharp" />
                    </div>
                    <span class="text-[#16E378] text-xl font-600">预约成功</span>
                </n-flex>
                <n-flex class="mt-12" vertical :size="20">
                    <div>
                        <span class="label-key">事项：</span>
                        <span class="label-tex">{{info?.item.name}}</span>
                    </div>
                    <div>
                        <span class="label-key">时间：</span>
                        <span class="label-tex">{{ info?.date }} {{ info?.category == 2? '下午（14:30-17:00）' : '上午（08:30-12:00）' }}</span>
                    </div>
                    <div>
                        <span class="label-key">预约编号：</span>
                        <span class="label-tex">{{info?.number}}</span>
                    </div>
                    <div>
                        <span class="label-key">客服：</span>
                        <span class="label-tex">{{info?.to_user.username}}</span>
                    </div>
                    <div>
                        <span class="label-key">用户：</span>
                        <span class="label-tex">{{ info?.from_user.user }}</span>
                    </div>
                </n-flex>
                
                <n-button text-color="#2B8DC6" color="#dae9ff" class="w-110px h-44px mt-45px text-base" @click="preSuccessModal = false">确认</n-button>
            </div>
        </n-card>
    </n-modal>
</template>

<script lang="ts" setup>
    import { CheckmarkSharp } from "@vicons/ionicons5"
    import { useUserStore } from "@/store/modules/user"

    const userStore = useUserStore()
    const { userInfo } = storeToRefs(userStore)

    const props = defineProps(['info'])

    const preSuccessModal = ref(false)

    onMounted(() => {
        console.log(props.info);
    })

    const openModal = () => {
        preSuccessModal.value = true
    }

    defineExpose({
        openModal
    })
</script>

<style lang="scss" scoped>
    .success-card {
        padding: 52px 0;
        background: radial-gradient( 278% 209% at 50% 13%, #0972a9 0%, #114fa6 45%, rgba(0,85,254,0.38) 100%);
        border: 1px solid;

        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.73), rgba(255, 255, 255, 0.08)) 1 1;

        .icon-success {
            width: 28px;
            height: 28px;
            background-color: #07C160;
            border-radius: 50%;
        }

        .label-key {
            display: inline-block;
            width: 120px;
            text-align: right;
            color: rgba(255,255,255,0.7);
            font-size: 20px;
        }

        .label-tex {
            color: #fff;
            font-size: 20px;
        }
    }
</style>